<!-- 新增人员模块（会议消息、会议文件） -->
<template>
  <div class="notice-item">
    <el-form :data="model" label-width="auto">
      <el-form-item label="开放查看">
        <el-switch v-model="model.isOpen" />
      </el-form-item>

      <div class="view-scope">
        <div class="app-flex-mid app-flex-space-between view-scope__header">
          <div class="app-flex-mid view-scope__header--import">
            <div>可查看范围<span class="tips">（默认为全部）</span></div>
            <DownloadTemplate file-name="参会人员.xlsx" />
            <ImportUpload
              :attr="{ type: 'warning', icon: '', plain: true }"
              @change="onChange"
            ></ImportUpload>
          </div>

          <div>共计：{{ list.length }}人</div>
        </div>
        <div class="view-scope__table">
          <el-table :data="list">
            <el-table-column prop="mobile" label="手机号" />
            <el-table-column prop="name" label="人员姓名" />
            <el-table-column prop="jobTitle" label="职务" />
            <el-table-column prop="company" label="所属单位" />
            <el-table-column prop="role" label="参会角色" />
            <el-table-column label="操作">
              <template #default="scope">
                <el-button type="primary" link @click="handleDelete(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import DownloadTemplate from '@/components/form/DownloadTemplate.vue'
import ImportUpload from '@/components/form/ImportUpload.vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const model = defineModel({ type: Object, default: {} })

const fields = ['mobile', 'name', 'jobTitle', 'company', 'role']

const list = computed({
  get() {
    return model.value?.users || []
  },
  set(val) {
    model.value.users = val
  },
})

const onChange = reslut => {
  if (reslut.length > 1) {
    list.value = reslut.slice(1).map(row => {
      const obj = {}
      fields.forEach((field, index) => {
        obj[field] = row[index] ?? ''
      })
      return obj
    })
  } else {
    ElMessage.error('请上传正确的格式的文件')
  }
}

const handleDelete = index => {
  ElMessageBox.confirm('是否确定删除该成员?', '温馨提示', {
    type: 'warning',
  }).then(() => {
    list.value.splice(index, 1)
  })
}
</script>

<style lang="scss" scoped>
.notice-item {
  .view-scope {
    &__header {
      margin-bottom: 15px;
      &--import {
        gap: 15px;
        .tips {
          color: #c4c4c4;
          font-size: 12px;
        }
      }
    }
  }
}
</style>
